<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('添加')" :v-if="dialogVisible" append-to-body :visible.sync="dialogVisible" width="470px" @close='close'>
    <el-form ref="form" :model="record" label-width="150px" label-position="left" :rules="rules" style="margin:0 30px;" class="peerDialogForm">
      <el-form-item :label="$t('接口名称')" prop="interface">
        <el-select v-model="record.interface" filterable size='small' ref="interface" style="width:210px">
          <el-option v-for="item in interfaceList" :disabled="ospfv3List.includes(item.strPhysicsName) || item.enPortMode !== 0" :key="item.strPhysicsName" :label="item.strPhysicsName" :value="item.strPhysicsName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('区域')" prop="area">
        <el-input v-emoji v-model="record.area" style="width:210px" ref="area" size='small'></el-input>
      </el-form-item>
      <el-form-item :label="$t('成本')" prop="cost">
        <template slot="label">{{$t('成本')}}
          <el-tooltip class="item" effect="light" :content="$t('提示信息：接口的成本，默认值0，代表不启用此配置，范围 [0-65535]')" placement="top">
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <el-input v-emoji v-model="record.cost" style="width:210px" ref="cost" size='small'></el-input>
      </el-form-item>
      <el-form-item :label="$t('hello定时器')" prop="hello_interval">
        <template slot="label">{{$t('hello定时器')}}
          <el-tooltip class="item" effect="light" :content="$t('提示信息：发送hello报文的时间间隔，默认值10秒，范围 [1-65535]')" placement="top">
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <el-input v-emoji v-model="record.hello_interval" style="width:210px" ref="hello_interval" size='small'>
          <template slot="append">{{$t('秒')}}</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('dead定时器')" prop="dead_interval">
        <template slot="label">{{$t('dead定时器')}}
          <el-tooltip class="item" effect="light" :content="$t('提示信息：邻居失效时间间隔，默认值40秒，范围 [1-65535]')" placement="top">
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <el-input v-emoji v-model="record.dead_interval" style="width:210px" ref="dead_interval" size='small'>
          <template slot="append">{{$t('秒')}}</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('retransmit定时器')" prop="retransmit_interval">
        <template slot="label">{{$t('retransmit定时器')}}
          <el-tooltip class="item" effect="light" :content="$t('提示信息：重传数据库描述和链接状态请求数据包时间间隔，默认值5秒，范围 [1-65535]')" placement="top">
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <el-input v-emoji v-model="record.retransmit_interval" style="width:210px" ref="retransmit_interval" size='small'>
          <template slot="append">{{$t('秒')}}</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('优先级')" prop="priority">
        <template slot="label">{{$t('优先级')}}
          <el-tooltip class="item" effect="light" :content="$t('提示信息：路由器优先级，默认值1，范围 [0-255]')" placement="top">
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <el-input v-emoji v-model="record.priority" style="width:210px" ref="priority" size='small'></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="interAddSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close" class="interAddClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getPhysicalApiArray } from '@/api/network/api/physical'
import {
  // getOspfv3Info, // OSPFv3获取协议信息
  addOspfv3Interface // OSPFv3添加接口配置
} from '@/api/network/route/dynamicRoute/OSPFv3'
import { inputClass, selectClass } from '@/utils/input-class.js'
export default {
  name: 'InterfaceDialog',
  data () {
    var validateIp = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入IP地址')))
      } else if (this.isValidIP(value)) {
        callback()
      } else {
        callback(new Error(this.$t('请输入正确的IP地址')))
      }
    }
    var validateName = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else {
        callback()
      }
    }
    var validatePriority = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (value > 255 || value < 0) {
        callback(new Error(this.$t('请输入0-255之间的数字')))
      } else if (isNaN(Number(value))) {
        callback(new Error(this.$t('请输入数字')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else {
        callback()
      }
    }
    var validateCost = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (isNaN(Number(value))) {
        callback(new Error(this.$t('请输入数字')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (Number(value) < 0 || Number(value) > 65535) {
        callback(new Error(this.$t('必须在0-65535之间')))
      } else {
        callback()
      }
    }
    var validateSecond = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (isNaN(Number(value))) {
        callback(new Error(this.$t('请输入数字')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (Number(value) < 1 || Number(value) > 65535) {
        callback(new Error(this.$t('必须在1-65535之间')))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      record: {
        id: '',
        interface: '',
        area: '',
        cost: '0',
        hello_interval: '10',
        dead_interval: '40',
        retransmit_interval: '5',
        priority: '1'
      },
      recordCopy: {
        id: '',
        interface: '',
        area: '',
        cost: '0',
        hello_interval: '10',
        dead_interval: '40',
        retransmit_interval: '5',
        priority: '1'
      },
      type: '',
      interfaceList: [],
      ospfv3List: [],
      rules: {
        interface: [{ required: false, validator: validateName, trigger: 'change' }],
        area: [{ required: false, validator: validateIp, trigger: 'blur' }],
        cost: [{ required: false, validator: validateCost, trigger: 'blur' }],
        hello_interval: [{ required: false, validator: validateSecond, trigger: 'blur' }],
        dead_interval: [{ required: false, validator: validateSecond, trigger: 'blur' }],
        retransmit_interval: [{ required: false, validator: validateSecond, trigger: 'blur' }],
        priority: [{ required: false, validator: validatePriority, trigger: 'blur' }]
      }
    }
  },
  methods: {
    init (type, id, ospfv3List) {
      this.dialogVisible = true
      this.type = type
      this.record.id = id
      this.ospfv3List = []
      for (let item of ospfv3List) {
        this.ospfv3List.push(item.interface)
      }
      getPhysicalApiArray().then(res => { // strPhysicsName
        if (res.status === 0) {
          this.interfaceList = res.info
        }
      })
      this.$nextTick(() => {
        const data = ['area', 'cost', 'hello_interval', 'dead_interval', 'retransmit_interval', 'priority']
        const selectData = ['interface']
        inputClass(this.$refs, data)
        selectClass(this.$refs, selectData)
      })
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let formData = JSON.parse(JSON.stringify(this.record))
          if (this.type === '编辑') {
            addOspfv3Interface(formData).then(res => {
              if (res.status === 0) {
                this.$messages.success(this.$t('执行成功'))
                this.close()
                this.$emit('addInterface', formData)
              }
            })
          } else {
            this.$emit('addInterface', formData)
            this.close()
          }
        }
      })
    },
    close () {
      this.type = ''
      this.interfaceList = []
      this.ospfv3List = []
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.form.resetFields()
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    },
    isValidIP (ip) {
      let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      return reg.test(ip)
    }
  }
}
</script>
<style lang="less" scoped>
.peerDialogForm {
  .el-switch {
    margin-left: 15px;

    /deep/ .el-switch__core {
      &::before {
        content: "关闭";
        color: #fff;
        position: absolute;
        // font-size: 14px;
        transform: scale(0.85);
        left: 20px;
      }
    }

    &.switch-is-actived {
      /deep/ .el-switch__core {
        &::before {
          content: "开启";
          left: 8px;
          transform: scale(0.85);
        }
      }
    }
  }
}
</style>
